<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
      	<span>年级:</span>
        <select class="select" v-model="gradeSelect" @change="getClassData()" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>班级:</span>
        <select class="select" v-model="classSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in classOption" :label="item" :value="item"></option>
        </select>
	      <el-button type="primary" size="small" @click="getTabelData">搜索</el-button>
        <el-button type="primary" @click="clearGradeSelect" size="small">重置</el-button>
	    </div>
    </div>

    <div class="model">
      <img :src="IMGBASE64.PINGFENLEIBIE2X" class="pink">
      <span class="title">课程管理</span>
      <div class="kong"></div>
      <el-table :data="tableData" style="width: 100%">
      	<el-table-column prop="num" label="#" align="center" width="80"></el-table-column>
      	<el-table-column prop="grade" label="年级" align="center" width="120"></el-table-column>
      	<el-table-column prop="clazz" label="班级" align="center" width="120"></el-table-column>
      	<el-table-column prop="studentId" label="学号" align="center" width="120"></el-table-column>
      	<el-table-column prop="name" label="姓名" align="center" width="120"></el-table-column>
      	<el-table-column label="课程名称" align="center">
      		<template scope="scope">
						<el-select v-model="scope.row.courseSelect" placeholder="请选择" size="small">
              <el-option v-for="item in courseOption" :label="item.courseName" :value="item.courseName"></el-option>
					  </el-select>
					</template>
      	</el-table-column>
      </el-table>
      <el-pagination
        v-show="paging"
        @current-change="handleCurrentChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total"
        class="pull-right">
      </el-pagination>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      studentName: null,
      gradeSelect: null,
      gradeOption: {},
      classSelect: null,
      classOption: [],
      courseSelect: null,
      courseOption: [],
      tableData: [],
      total: 0,
      page: 1,
      paging: true,
      courseTotal: 0
    }
  },
  mounted () {
    this.getTotal()
    this.getGradeData()
    this.getTabelData()
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getTabelData()
    },
    getTabelData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'studentInfo/listQuery', {page: (this.page), rows: 20, grade: this.gradeSelect, clazz: this.classSelect, name: this.studentName}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.rows
          this.total = response.data.data.total
          for (var i = 0; i < this.tableData.length; i++) {
            // this.tableData[i].num = i + 1
            // this.tableData[i].courseSelect = null
            this.$set(this.tableData[i], 'num', i + 1)
            this.$set(this.tableData[i], 'courseSelect', null)
            for (var j in this.gradeOption) {
              if (this.tableData[i].grade === parseInt(j)) {
                this.tableData[i].grade = this.gradeOption[j]
              }
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeSelect (scope) {
      // for (var i = 0; i < this.tableData.length; i++) {
      //   console.log('i=' + i)
      //   console.log(this.tableData)
      // }
      console.log(this.tableData)
    },
    getTotal () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'interest/course/courseManage/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.courseTotal = response.data.data.total
          this.getCourseData()
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getCourseData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'interest/course/courseManage/query', {size: this.courseTotal}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.courseOption = response.data.data.content
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getGradeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearGradeSelect () {
      this.gradeSelect = null
      this.classSelect = null
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
.retrieval{
	.body{
		span{
	  	margin-left: 4%;
	  }
	  span:first-child{
	  	margin-left: 0;
	  }
		select{
			width: 13%;
			border: 0;
			border-bottom: 1px solid #D7D7D7;
      margin-right: 2%;
		}
	}
}
</style>
